<template>
  <view class="container" :style="{height: `${windowHeight}px`}">
	  <view style="display: flex;">
		  <view style="line-height: 40px;">卷号 </view>
	  	<uni-easyinput ref="input" focus type="text" v-model="model" style="flex: 1;" placeholder="请输入卷号"/>
		<!-- <button type="danger" size="mini" style="margin-left: 5px;line-height: 3;" @click="scanCode">扫描</button> -->
		<uni-icons type="scan" size="30" style="margin-top: 4px;"  @click="scanCode"></uni-icons>
		<button type="warn" size="mini" style="margin-left: 5px;line-height: 3;" @click="clearModel">清除</button>
	  </view>
	  <view style="padding-top: 10px;">
		<view class="content">
			<uni-table ref="table" width="100%" :loading="loading" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th width="70" align="center">卷号</uni-th>
					<uni-th width="70" align="center">型号</uni-th>
					<uni-th width="70" align="center">米数</uni-th>
					<uni-th width="70" align="center">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData.filter(_ => _.repositoryName == '2.8米仓库')" :key="index">
					<uni-td align="center">{{ item.fabricId }}</uni-td>
					<uni-td align="center">{{ item.availableQuantity }}</uni-td>
					<uni-td align="center">{{ item.repositoryName }}</uni-td>
					<uni-td align="center">{{ item.grade }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
  </view>
</template>

<script>
	import { listInventory, listFabric } from '@/api/fabricManagement/InventoryQuery.js'
	export default {
    data() {
      return {
		  loading: false,
        windowHeight: uni.getSystemInfoSync().windowHeight,
		model: '',
		tableData: [],
		// 每页数据量
		pageSize: 10,
		// 当前页
		pageCurrent: 1,
		// 数据总量
		total: 0,
      }
    },
	watch: {
		model(val) {
			if(val) {
				this.getList()
				// this.getListFabric()
				return
			}
			this.tableData = []
		}
	},
	onLoad() {
		// this.getList()
	},
    methods: {
		async getList(mdFabricId){
			const params = {
				pageNum: 1,
				pageSize: 100,
				// fabricId: mdFabricId
				fabricName: this.model
			}
			const res = await listInventory(params)
			this.tableData = res.rows
			console.log(this.tableData)
		},
		async getListFabric() {
			const params = {
				pageNum: 1,
				pageSize: 100,
				enableFlag: "Y",
				name: this.model
			}
			const res = await listFabric(params)
			const mdFabricId = res.rows && res.rows[0] ? res.rows[0].mdFabricId : ''
			mdFabricId && this.getList(mdFabricId)
		},
        input() {
		  // this.$modal.showToast(this.model)
		  this.getList()
	    },
	    clearModel() {
		  this.model = ''
	    }, 
		async scanCode() {
			const _ = this
			uni.scanCode({
				onlyFromCamera: true,
				success: function(res) {
					_.model = res.result
				}
			});
		},
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    background-color: #fff;
	padding: 5px;
  }
  .history {
  		background: white;
  		// padding: 30rpx;
  		.history-head {
  			display: flex;
  			align-items: center;
  			text {
  				display: block;
  				flex: 1;
  				font-size: 28rpx;
  				// font-weight: bold;
  				color: black;
				padding-top: 10px;
  			}
  		}
  	}
  	.history-list {
		padding: 10px 10px 0 10px ;
  		scroll-view {
  			display: inline-block;
  			vertical-align: top;
  			background-color: #f1f1f1;
  			color: #333;
  			font-size: 16px;
  			padding: 5rpx 20rpx;
  			border-radius: 40rpx;
  			margin: 10rpx 10rpx 0 0;
  			width: fit-content;
  		}
  	}
</style>
